<script setup>
import { computed } from 'vue'
const IMAGE_URL = computed(() => import.meta.env.VITE_IMAGE_URL)

const statusObj = {
  0: '即将开始',
  1: '进行中',
  2: '已结束',
}
const props = defineProps({
  obj: {
    type: Object,
    default: () => {},
  },
})
</script>

<template>
  <view class="fes-active-card">
    <view class="date">{{ obj.acBegin }}</view>
    <view class="card-item flex-between">
      <view class="left flex-x">
        <image :src="`${IMAGE_URL}${obj.acCover}`" mode="aspectFill"></image>
        <view>
          <view class="title">{{ obj.acName }}</view>
          <view class="count">参加人数：{{ obj.currentPeople }}人</view>
        </view>
      </view>
      <view class="right">
        <view class="status status-begin status-end">{{
          statusObj[obj.acProcess]
        }}</view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.fes-active-card {
  margin-bottom: 20rpx;
  .date {
    font-size: 28rpx;
    font-weight: 500;
    color: #333333;
    margin-bottom: 24rpx;
  }
  .card-item {
    border-radius: 16rpx;
    background: #ffffff;
    padding: 40rpx;
    .left {
      margin-right: 60rpx;
      image {
        width: 124rpx;
        height: 124rpx;
        margin-right: 26rpx;
        flex-shrink: 0;
      }
      .title {
        font-size: 32rpx;
        font-weight: 500;
        line-height: 48rpx;
        color: #000000;
      }
      .count {
        font-size: 26rpx;
        font-weight: 400;
        line-height: 36rpx;
        color: #666666;
      }
    }
    .right {
      flex-shrink: 0;
    }
  }
}
.status-begin {
  padding: 6rpx;
  border-radius: 6rpx;
  background: #fcecdc;
  font-size: 24rpx;
  font-weight: 400;
  color: #ea5506;
}
.status-end {
  padding: 6rpx;
  border-radius: 6rpx;
  background: #ededed;
  font-size: 24rpx;
  font-weight: 400;
  color: #595959;
}
.flex-x {
  display: flex;
}
.flex-center {
  display: flex;
  justify-content: center;
}
.flex-between {
  display: flex;
  justify-content: space-between;
}
.limit2 {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: nowrap;
}
.limit3 {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  white-space: nowrap;
}
</style>
